<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>

	</head>
	<body>
		<p>

			<script>


/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */
var store;
var grid;
var rendered=false;
Ext.onReady(function() {

    // create the Data Store
    store = new Ext.data.JsonStore({
        root: 'genera',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,

        fields: [
            'canonical',
            'authorship',
            'genus'
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: 'http://localhost:8080/agi/genus/json/search.htm?q='
        })
    });
    store.setDefaultSort('canonical', 'asc');


    // pluggable renders
    function renderSources(value, p, r){
        if (r.data.genus.genusUsages.length == 1) {
			return "<a href='#'>" + r.data.genus.genusUsages[0].agiDatasource.name + "</a>";
        } else {
        	return r.data.genus.genusUsages.length + " sources"
        }
    }

    // pluggable renders
    function renderCodes(value, p, r){
        var icbn = false;
        var icnb = false;
        var iczn = false;

        for (var i=0; i<r.data.genus.genusUsages.length; i++) {
        	if (r.data.genus.genusUsages[i].agiDatasource.icbn) icbn=true;
        	if (r.data.genus.genusUsages[i].agiDatasource.icnb) icnb=true;
        	if (r.data.genus.genusUsages[i].agiDatasource.iczn) iczn=true;
        }

        var code = "";
        if (icbn) code = " ICBN ";
        if (icnb) code = code + " ICNB ";
        if (iczn) code = code + " ICZN ";
        return code;
    }


    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying genera {0} - {1} of {2}',
        emptyMsg: "No genera to display",

        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

    grid = new Ext.grid.GridPanel({
        el:'genera-grid',
        width:700,
        height:500,
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'canonical', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Genus",
            dataIndex: 'canonical',
            width: 100,
            sortable: true
        },{
            id: 'authorship', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Authorship",
            dataIndex: 'authorship',
            width: 100,
            sortable: true
        },{
            id: 'genus', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Sources",
            dataIndex: 'genus',
            width: 100,
            sortable: false,
            renderer: renderSources
        },{
            id: 'genus', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Sources",
            dataIndex: 'genus',
            width: 100,
            sortable: false,
            renderer: renderCodes
        }],
 		sm: new Ext.grid.RowSelectionModel({
			singleSelect: false,
			listeners: {
				 rowselect: function(smObj, rowIndex, record) {
					 selRecordStore = record;
				}
		   }
		}),
        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:false,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>IGNORE THIS... under development</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: pagingBar
    });

    // render it
    //grid.render();

    // trigger the data store load
    //store.load({params:{start:0, limit:25}});



});


/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});

function search() {
	var q = document.getElementById("q").value;
	store.proxy = new Ext.data.HttpProxy({
    	url: 'http://localhost:8080/agi/genus/json/search.htm?q=' + q
    });
    store.load({params:{start:0, limit:25}});

    if (!rendered) {
    	grid.render();
    	rendered=true;
    }


}




	</script>

<p>
	<form action="javascript:search()">
		Search: <input type="text" id="q" name="q" class="large" value=""/> <input type="submit" value="Search"/>
	</form>
	<br/>

<p>
<div id="genera-grid"></div>
	</body>
</html>

